<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跟着LLM学Python - 配套网站</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   
</head>
<!-- 添加这一行 -->
<link rel="stylesheet" href="styles.css">

<body>
    <!-- 全屏背景图 -->
    <div class="background-image"></div>
    
    <div class="container">
        <!-- 顶部导航区 -->
        <header>
            <div class="book-title">
                <h1>跟着LLM学Python</h1>
                <p>探索科学世界的奇妙旅程</p>
            </div>
            <a href="https://turtle.codemao.cn/home" class="download-btn">
                <img src="images/turtle.png" alt="海龟编辑器">
                <span>体验海龟编辑器</span>
            </a>
        </header>

        <!-- 主内容区 -->
        <main>
            <!-- 左侧章节选择栏 (38%宽度) -->
            <aside class="chapter-sidebar">
                <div class="chapter-scroll">
                    <!-- 章节项示例 - 需要根据实际数据动态生成 -->
                    <div class="chapter-item" data-chapter="1">
                        <div class="chapter-thumbnail">
                            <img src="/images/test.jpg" alt="第一章">
                            <div class="chapter-overlay">
                                <h3>第一章</h3>
                                <p>学习者、AI与Python编程</p>
                            </div>
                        </div>
                    </div>
                    <!-- 其他章节... -->
                </div>
            </aside>
            
            <!-- 右侧内容区 -->
            <section class="content-main">
                <div class="search-right-align">
                    <div class="search-box">
                        <input type="text" placeholder="搜索章节...">
                        <button><i class="fas fa-search"></i></button>
                    </div>
                </div>
                <!-- 提示词模板区块 -->
                <a href="prompts.html" class="button-link">
                    <h2>提示词模板</h2>
                </a>
                <div class="preview-item">
                    <div class="preview-item-content">
                        <h3>模板1: 行星运动</h3>
                        <p>如何描述地球的公转和自转？...</p>
                    </div>
                    <button class="copy-btn">复制</button>
                </div>
                <div class="preview-item">
                    <h3>模板2: 星系探索</h3>
                    <p>如何描述银河系的结构？...</p>
                    <button class="copy-btn">复制</button>
                </div>

                <!-- 书中代码区块 -->
                <div class="content-card">
                    <h2 class="card-title">书中代码</h2>
                    <div class="preview-item">
                        <h3>代码1: 行星轨道模拟</h3>
                        <pre><code>function calculateOrbit() {...}</code></pre>
                        <a href="code.html" class="button-link">进入代码</a>
                        <button class="copy-btn">复制</button>
                    </div>
                    <div class="preview-item">
                        <h3>代码2: 光合作用计算</h3>
                        <pre><code>const lightEfficiency = ...</code></pre>
                        <a href="code.html" class="see-more">查看全部 →</a>
                    </div>
                </div>
            </section>
        </main>

        <!-- 右下角论坛入口 -->
        <div class="forum-float">
            <a href="forum.html">
                <img src="images/search.png" alt="进入论坛">
                <span>读者论坛</span>
            </a>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>